<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义打单模板设计工具</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        // 配置Tailwind自定义颜色和字体
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#6B7280',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        light: '#F2F3F5',
                        dark: '#1D2129'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .template-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .control-hover {
                @apply hover:bg-primary/5 hover:border-primary/30 transition-all cursor-move;
            }
            .selected-control {
                @apply ring-2 ring-primary/50 ring-dashed;
            }
            .panel-scroll {
                scrollbar-width: thin;
                scrollbar-color: #ddd #f5f5f5;
            }
            .panel-scroll::-webkit-scrollbar {
                width: 6px;
            }
            .panel-scroll::-webkit-scrollbar-track {
                background: #f5f5f5;
            }
            .panel-scroll::-webkit-scrollbar-thumb {
                background-color: #ddd;
                border-radius: 20px;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark overflow-hidden h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white border-b border-gray-200 py-3 px-6 flex items-center justify-between z-10">
        <div class="flex items-center gap-2">
            <div class="w-9 h-9 rounded-lg bg-primary flex items-center justify-center text-white">
                <i class="fa fa-file-text-o"></i>
            </div>
            <h1 class="text-lg font-bold">打单模板设计工具</h1>
        </div>
        
        <div class="flex items-center gap-4">
            <div class="flex items-center gap-2">
                <button id="saveTemplate" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors flex items-center gap-1.5">
                    <i class="fa fa-save"></i>
                    <span>保存模板</span>
                </button>
                <button id="previewTemplate" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-1.5">
                    <i class="fa fa-eye"></i>
                    <span>预览打印</span>
                </button>
                <button id="exportTemplate" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors flex items-center gap-1.5">
                    <i class="fa fa-download"></i>
                    <span>导出模板</span>
                </button>
            </div>
            
            <div class="flex items-center gap-3">
                <button id="undoAction" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors">
                    <i class="fa fa-undo"></i>
                </button>
                <button id="redoAction" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors">
                    <i class="fa fa-repeat"></i>
                </button>
                <button id="clearTemplate" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 transition-colors">
                    <i class="fa fa-trash-o"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-1 flex overflow-hidden">
        <!-- 左侧控件面板 -->
        <div class="w-64 bg-white border-r border-gray-200 p-4 flex flex-col h-full">
            <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">基础控件</h2>
            
            <div class="space-y-2 panel-scroll flex-1">
                <!-- 文本控件 -->
                <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="text">
                    <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-font"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium">文本</p>
                        <p class="text-xs text-gray-500">添加文本内容</p>
                    </div>
                </div>
                
                <!-- 标题控件 -->
                <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="heading">
                    <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-header"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium">标题</p>
                        <p class="text-xs text-gray-500">添加标题内容</p>
                    </div>
                </div>
                
                <!-- 图片控件 -->
                <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="image">
                    <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-picture-o"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium">图片</p>
                        <p class="text-xs text-gray-500">添加图片元素</p>
                    </div>
                </div>
                
                <!-- 线条控件 -->
                <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="line">
                    <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-minus"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium">线条</p>
                        <p class="text-xs text-gray-500">添加分隔线</p>
                    </div>
                </div>
                
                <!-- 矩形控件 -->
                <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="rectangle">
                    <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                        <i class="fa fa-square-o"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium">矩形</p>
                        <p class="text-xs text-gray-500">添加矩形框</p>
                    </div>
                </div>
            </div>
            
            <div class="mt-4 pt-4 border-t border-gray-200">
                <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">业务控件</h2>
                
                <div class="space-y-2 panel-scroll max-h-64">
                    <!-- 客户信息控件 -->
                    <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="customerInfo">
                        <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-user"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium">客户信息</p>
                            <p class="text-xs text-gray-500">客户名称、地址等</p>
                        </div>
                    </div>
                    
                    <!-- 订单信息控件 -->
                    <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="orderInfo">
                        <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-file-text"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium">订单信息</p>
                            <p class="text-xs text-gray-500">订单号、日期等</p>
                        </div>
                    </div>
                    
                    <!-- 商品表格控件 -->
                    <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="productTable">
                        <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-table"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium">商品表格</p>
                            <p class="text-xs text-gray-500">商品明细列表</p>
                        </div>
                    </div>
                    
                    <!-- 合计信息控件 -->
                    <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="summary">
                        <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-calculator"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium">合计信息</p>
                            <p class="text-xs text-gray-500">金额总计等</p>
                        </div>
                    </div>
                    
                    <!-- 签名区域控件 -->
                    <div class="control-item p-3 bg-white border border-gray-200 rounded-lg hover:border-primary/50 cursor-move transition-all flex items-center gap-3" draggable="true" data-type="signature">
                        <div class="w-8 h-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-pencil"></i>
                        </div>
                        <div>
                            <p class="text-sm font-medium">签名区域</p>
                            <p class="text-xs text-gray-500">签字区域</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 中间预览区域 -->
        <div class="flex-1 flex flex-col bg-gray-100 overflow-hidden">
            <div class="p-4 flex justify-between items-center border-b border-gray-200 bg-white">
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-gray-600">纸张大小:</label>
                        <select id="paperSize" class="border border-gray-300 rounded-md text-sm px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option value="a4">A4 (210×297mm)</option>
                            <option value="letter">Letter (216×279mm)</option>
                            <option value="legal">Legal (216×356mm)</option>
                            <option value="custom">自定义</option>
                        </select>
                    </div>
                    
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-gray-600">方向:</label>
                        <div class="flex border rounded-md overflow-hidden">
                            <button id="portrait" class="px-3 py-1 text-sm bg-primary text-white">纵向</button>
                            <button id="landscape" class="px-3 py-1 text-sm bg-white text-gray-600 hover:bg-gray-50">横向</button>
                        </div>
                    </div>
                    
                    <div class="flex items-center gap-2">
                        <label class="text-sm text-gray-600">缩放:</label>
                        <select id="zoomLevel" class="border border-gray-300 rounded-md text-sm px-2 py-1 focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                            <option value="50">50%</option>
                            <option value="75">75%</option>
                            <option value="100" selected>100%</option>
                            <option value="125">125%</option>
                            <option value="150">150%</option>
                        </select>
                    </div>
                </div>
                
                <div>
                    <button id="addPage" class="text-sm text-primary hover:text-primary/80 flex items-center gap-1">
                        <i class="fa fa-plus-circle"></i>
                        <span>添加页面</span>
                    </button>
                </div>
            </div>
            
            <!-- 模板设计区域 -->
            <div id="templateContainer" class="flex-1 overflow-auto p-8 flex justify-center items-start bg-gray-100">
                <!-- A4纸张大小的模板区域 -->
                <div id="templateCanvas" class="w-[210mm] h-[297mm] bg-white template-shadow relative overflow-hidden cursor-default">
                    <!-- 模板内容将通过JS动态添加 -->
                    <div class="absolute inset-0 p-8" id="templateContent">
                        <!-- 默认添加一个标题作为示例 -->
                        <div class="template-control" data-type="heading" data-id="1" style="position: relative; top: 0; left: 0; width: 100%;">
                            <h1 class="text-2xl font-bold text-center">订单详情</h1>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧属性面板 -->
        <div id="propertiesPanel" class="w-72 bg-white border-l border-gray-200 p-4 hidden md:block overflow-y-auto panel-scroll h-full">
            <h2 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-4">控件属性</h2>
            
            <div id="noSelection" class="py-10 text-center">
                <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center text-gray-400 mx-auto mb-3">
                    <i class="fa fa-hand-pointer-o text-2xl"></i>
                </div>
                <p class="text-sm text-gray-500">请在模板中选择一个控件进行编辑</p>
            </div>
            
            <div id="controlProperties" class="space-y-5 hidden">
                <!-- 通用属性 -->
                <div class="space-y-3">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">基本属性</h3>
                    
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">控件名称</label>
                        <input type="text" id="controlName" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                    </div>
                    
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">内容</label>
                        <textarea id="controlContent" rows="2" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"></textarea>
                    </div>
                </div>
                
                <!-- 位置和大小 -->
                <div class="space-y-3">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">位置和大小</h3>
                    
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">X坐标 (mm)</label>
                            <input type="number" id="controlX" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">Y坐标 (mm)</label>
                            <input type="number" id="controlY" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">宽度 (mm)</label>
                            <input type="number" id="controlWidth" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        </div>
                        <div>
                            <label class="block text-xs text-gray-600 mb-1">高度 (mm)</label>
                            <input type="number" id="controlHeight" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
                        </div>
                    </div>
                </div>
                
                <!-- 字体样式 -->
                <div class="space-y-3">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">字体样式</h3>
                    
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">字体大小 (px)</label>
                        <input type="number" id="controlFontSize" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="14">
                    </div>
                    
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">字体颜色</label>
                        <div class="flex gap-2">
                            <input type="color" id="controlColor" class="w-10 h-10 p-0 border border-gray-300 rounded-md" value="#000000">
                            <input type="text" id="controlColorText" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="#000000">
                        </div>
                    </div>
                    
                    <div class="flex flex-wrap gap-2">
                        <label class="inline-flex items-center gap-1 cursor-pointer">
                            <input type="checkbox" id="controlBold" class="rounded text-primary focus:ring-primary">
                            <span class="text-xs text-gray-600 font-bold">加粗</span>
                        </label>
                        <label class="inline-flex items-center gap-1 cursor-pointer">
                            <input type="checkbox" id="controlItalic" class="rounded text-primary focus:ring-primary">
                            <span class="text-xs text-gray-600 italic">斜体</span>
                        </label>
                        <label class="inline-flex items-center gap-1 cursor-pointer">
                            <input type="checkbox" id="controlUnderline" class="rounded text-primary focus:ring-primary">
                            <span class="text-xs text-gray-600 underline">下划线</span>
                        </label>
                    </div>
                </div>
                
                <!-- 对齐方式 -->
                <div class="space-y-3">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">对齐方式</h3>
                    
                    <div class="flex gap-2">
                        <button id="alignLeft" class="flex-1 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            <i class="fa fa-align-left"></i>
                        </button>
                        <button id="alignCenter" class="flex-1 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            <i class="fa fa-align-center"></i>
                        </button>
                        <button id="alignRight" class="flex-1 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            <i class="fa fa-align-right"></i>
                        </button>
                        <button id="alignJustify" class="flex-1 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors">
                            <i class="fa fa-align-justify"></i>
                        </button>
                    </div>
                </div>
                
                <!-- 边框样式 -->
                <div class="space-y-3">
                    <h3 class="text-xs font-medium text-gray-500 uppercase">边框样式</h3>
                    
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">边框宽度 (px)</label>
                        <input type="number" id="borderWidth" class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="0">
                    </div>
                    
                    <div>
                        <label class="block text-xs text-gray-600 mb-1">边框颜色</label>
                        <div class="flex gap-2">
                            <input type="color" id="borderColor" class="w-10 h-10 p-0 border border-gray-300 rounded-md" value="#000000">
                            <input type="text" id="borderColorText" class="flex-1 px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" value="#000000">
                        </div>
                    </div>
                </div>
                
                <!-- 操作按钮 -->
                <div class="flex gap-2 pt-2">
                    <button id="deleteControl" class="flex-1 py-2 bg-gray-100 text-danger rounded-md hover:bg-gray-200 transition-colors text-sm">
                        <i class="fa fa-trash-o mr-1"></i> 删除
                    </button>
                    <button id="duplicateControl" class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors text-sm">
                        <i class="fa fa-copy mr-1"></i> 复制
                    </button>
                </div>
            </div>
        </div>
    </main>

    <script>
        // 全局变量
        let currentControlId = 1;
        let selectedControl = null;
        let isDragging = false;
        let dragOffsetX = 0;
        let dragOffsetY = 0;
        let history = [];
        let historyIndex = -1;

        // DOM 元素
        const templateContent = document.getElementById('templateContent');
        const controlProperties = document.getElementById('controlProperties');
        const noSelection = document.getElementById('noSelection');
        const templateCanvas = document.getElementById('templateCanvas');
        const paperSizeSelect = document.getElementById('paperSize');
        const zoomLevelSelect = document.getElementById('zoomLevel');
        const portraitBtn = document.getElementById('portrait');
        const landscapeBtn = document.getElementById('landscape');

        // 初始化
        document.addEventListener('DOMContentLoaded', () => {
            initDragAndDrop();
            initPropertyEditors();
            initTemplateActions();
            initCanvasEvents();
            saveStateToHistory();
        });

        // 初始化拖拽功能
        function initDragAndDrop() {
            // 控件拖拽源
            document.querySelectorAll('.control-item').forEach(item => {
                item.addEventListener('dragstart', (e) => {
                    e.dataTransfer.setData('text/plain', item.getAttribute('data-type'));
                    item.classList.add('opacity-50');
                });

                item.addEventListener('dragend', () => {
                    item.classList.remove('opacity-50');
                });
            });

            // 模板区域拖放目标
            templateContent.addEventListener('dragover', (e) => {
                e.preventDefault();
                templateContent.classList.add('bg-primary/5');
            });

            templateContent.addEventListener('dragleave', () => {
                templateContent.classList.remove('bg-primary/5');
            });

            templateContent.addEventListener('drop', (e) => {
                e.preventDefault();
                templateContent.classList.remove('bg-primary/5');
                
                const controlType = e.dataTransfer.getData('text/plain');
                if (controlType) {
                    addControlToTemplate(controlType, e.clientX, e.clientY);
                    saveStateToHistory();
                }
            });
        }

        // 添加控件到模板
        function addControlToTemplate(type, clientX, clientY) {
            currentControlId++;
            const controlId = currentControlId;
            
            // 获取模板的位置和缩放
            const rect = templateCanvas.getBoundingClientRect();
            const scale = rect.width / templateCanvas.offsetWidth;
            
            // 计算相对位置
            const x = ((clientX - rect.left) / scale - templateContent.offsetLeft) / 3.78; // 转换为mm (1mm = 3.78px)
            const y = ((clientY - rect.top) / scale - templateContent.offsetTop) / 3.78;
            
            let controlHtml = '';
            let controlStyle = `position: absolute; top: ${y}mm; left: ${x}mm;`;
            
            // 根据控件类型生成HTML
            switch(type) {
                case 'text':
                    controlHtml = `<div class="template-control" data-type="text" data-id="${controlId}" style="${controlStyle}">
                        <p class="text-base">文本内容</p>
                    </div>`;
                    break;
                    
                case 'heading':
                    controlHtml = `<div class="template-control" data-type="heading" data-id="${controlId}" style="${controlStyle}">
                        <h2 class="text-xl font-bold">标题</h2>
                    </div>`;
                    break;
                    
                case 'image':
                    controlHtml = `<div class="template-control" data-type="image" data-id="${controlId}" style="${controlStyle} width: 60mm; height: 40mm;">
                        <div class="w-full h-full bg-gray-100 flex items-center justify-center">
                            <i class="fa fa-picture-o text-2xl text-gray-400"></i>
                        </div>
                    </div>`;
                    break;
                    
                case 'line':
                    controlHtml = `<div class="template-control" data-type="line" data-id="${controlId}" style="${controlStyle} width: 100mm; height: 0;">
                        <hr class="border-t border-gray-300">
                    </div>`;
                    break;
                    
                case 'rectangle':
                    controlHtml = `<div class="template-control" data-type="rectangle" data-id="${controlId}" style="${controlStyle} width: 80mm; height: 50mm; border: 1px solid #ddd;"></div>`;
                    break;
                    
                case 'customerInfo':
                    controlHtml = `<div class="template-control" data-type="customerInfo" data-id="${controlId}" style="${controlStyle} width: 160mm;">
                        <p class="text-sm text-gray-500">客户信息</p>
                        <p class="font-medium">客户名称: {{customer.name}}</p>
                        <p>地址: {{customer.address}}</p>
                        <p>电话: {{customer.phone}}</p>
                    </div>`;
                    break;
                    
                case 'orderInfo':
                    controlHtml = `<div class="template-control" data-type="orderInfo" data-id="${controlId}" style="${controlStyle} width: 160mm;">
                        <p class="text-sm text-gray-500">订单信息</p>
                        <p>订单编号: {{order.code}}</p>
                        <p>订单日期: {{order.date}}</p>
                        <p>订单状态: {{order.status}}</p>
                    </div>`;
                    break;
                    
                case 'productTable':
                    controlHtml = `<div class="template-control" data-type="productTable" data-id="${controlId}" style="${controlStyle} width: 160mm; height: 100mm;">
                        <p class="text-sm text-gray-500 mb-2">商品明细</p>
                        <table class="w-full border-collapse text-sm">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="border border-gray-200 px-2 py-1 text-left">序号</th>
                                    <th class="border border-gray-200 px-2 py-1 text-left">商品名称</th>
                                    <th class="border border-gray-200 px-2 py-1 text-right">数量</th>
                                    <th class="border border-gray-200 px-2 py-1 text-right">单价</th>
                                    <th class="border border-gray-200 px-2 py-1 text-right">金额</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="border border-gray-200 px-2 py-1">1</td>
                                    <td class="border border-gray-200 px-2 py-1">{{product.name}}</td>
                                    <td class="border border-gray-200 px-2 py-1 text-right">{{product.quantity}}</td>
                                    <td class="border border-gray-200 px-2 py-1 text-right">{{product.price}}</td>
                                    <td class="border border-gray-200 px-2 py-1 text-right">{{product.amount}}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>`;
                    break;
                    
                case 'summary':
                    controlHtml = `<div class="template-control" data-type="summary" data-id="${controlId}" style="${controlStyle} width: 160mm; text-right">
                        <p>小计: {{summary.subtotal}}</p>
                        <p>运费: {{summary.shipping}}</p>
                        <p>折扣: {{summary.discount}}</p>
                        <p class="font-bold text-lg">总计: {{summary.total}}</p>
                    </div>`;
                    break;
                    
                case 'signature':
                    controlHtml = `<div class="template-control" data-type="signature" data-id="${controlId}" style="${controlStyle} width: 160mm; display: flex; justify-content: space-between;">
                        <div class="text-center">
                            <p>客户签字:</p>
                            <div class="w-40 h-16 border-b border-gray-300 mt-1"></div>
                            <p class="text-xs text-gray-500 mt-1">日期: ____________</p>
                        </div>
                        <div class="text-center">
                            <p>公司签字:</p>
                            <div class="w-40 h-16 border-b border-gray-300 mt-1"></div>
                            <p class="text-xs text-gray-500 mt-1">日期: ____________</p>
                        </div>
                    </div>`;
                    break;
            }
            
            // 添加到模板
            templateContent.insertAdjacentHTML('beforeend', controlHtml);
            
            // 获取新添加的控件并绑定事件
            const newControl = templateContent.querySelector(`.template-control[data-id="${controlId}"]`);
            bindControlEvents(newControl);
            
            // 选中新添加的控件
            selectControl(newControl);
            
            return newControl;
        }

        // 绑定控件事件
        function bindControlEvents(control) {
            // 选中控件
            control.addEventListener('click', (e) => {
                e.stopPropagation();
                selectControl(control);
            });
            
            // 开始拖拽
            control.addEventListener('mousedown', (e) => {
                if (e.target.closest('input, textarea, select, button')) return;
                
                e.stopPropagation();
                isDragging = true;
                selectedControl = control;
                
                const rect = control.getBoundingClientRect();
                dragOffsetX = e.clientX - rect.left;
                dragOffsetY = e.clientY - rect.top;
                
                control.classList.add('opacity-70');
                document.body.style.cursor = 'grabbing';
            });
            
            // 双击编辑文本
            control.addEventListener('dblclick', (e) => {
                if (['text', 'heading'].includes(control.getAttribute('data-type'))) {
                    const textElement = control.querySelector('p, h1, h2, h3');
                    if (textElement) {
                        const currentText = textElement.textContent;
                        textElement.contentEditable = true;
                        textElement.focus();
                        
                        // 保存编辑后的内容
                        textElement.addEventListener('blur', () => {
                            textElement.contentEditable = false;
                            updatePropertyValues();
                            saveStateToHistory();
                        }, { once: true });
                    }
                }
            });
        }

        // 选中控件
        function selectControl(control) {
            // 取消之前选中的控件
            if (selectedControl) {
                selectedControl.classList.remove('selected-control');
            }
            
            // 选中当前控件
            selectedControl = control;
            control.classList.add('selected-control');
            
            // 显示属性面板并填充数据
            controlProperties.classList.remove('hidden');
            noSelection.classList.add('hidden');
            loadControlProperties(control);
        }

        // 加载控件属性到编辑面板
        function loadControlProperties(control) {
            const type = control.getAttribute('data-type');
            const style = window.getComputedStyle(control);
            
            // 基本属性
            document.getElementById('controlName').value = typeToName(type);
            document.getElementById('controlContent').value = getControlContent(control);
            
            // 位置和大小 (转换为mm)
            document.getElementById('controlX').value = parseFloat(control.style.left) || 0;
            document.getElementById('controlY').value = parseFloat(control.style.top) || 0;
            document.getElementById('controlWidth').value = parseFloat(control.style.width) || getDefaultWidth(type);
            document.getElementById('controlHeight').value = parseFloat(control.style.height) || getDefaultHeight(type);
            
            // 字体样式
            document.getElementById('controlFontSize').value = parseInt(style.fontSize) || 14;
            document.getElementById('controlColor').value = rgbToHex(style.color) || '#000000';
            document.getElementById('controlColorText').value = rgbToHex(style.color) || '#000000';
            document.getElementById('controlBold').checked = style.fontWeight === 'bold' || style.fontWeight >= 600;
            document.getElementById('controlItalic').checked = style.fontStyle === 'italic';
            document.getElementById('controlUnderline').checked = style.textDecoration.includes('underline');
            
            // 对齐方式
            document.querySelectorAll('#alignLeft, #alignCenter, #alignRight, #alignJustify').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('bg-white', 'text-gray-600');
            });
            
            switch(style.textAlign) {
                case 'center':
                    document.getElementById('alignCenter').classList.remove('bg-white', 'text-gray-600');
                    document.getElementById('alignCenter').classList.add('bg-primary', 'text-white');
                    break;
                case 'right':
                    document.getElementById('alignRight').classList.remove('bg-white', 'text-gray-600');
                    document.getElementById('alignRight').classList.add('bg-primary', 'text-white');
                    break;
                case 'justify':
                    document.getElementById('alignJustify').classList.remove('bg-white', 'text-gray-600');
                    document.getElementById('alignJustify').classList.add('bg-primary', 'text-white');
                    break;
                default:
                    document.getElementById('alignLeft').classList.remove('bg-white', 'text-gray-600');
                    document.getElementById('alignLeft').classList.add('bg-primary', 'text-white');
            }
            
            // 边框样式
            document.getElementById('borderWidth').value = parseInt(style.borderWidth) || 0;
            document.getElementById('borderColor').value = rgbToHex(style.borderColor) || '#000000';
            document.getElementById('borderColorText').value = rgbToHex(style.borderColor) || '#000000';
        }

        // 初始化属性编辑器事件
        function initPropertyEditors() {
            // 基本属性
            document.getElementById('controlContent').addEventListener('input', updateControlFromProperties);
            
            // 位置和大小
            document.getElementById('controlX').addEventListener('input', updateControlFromProperties);
            document.getElementById('controlY').addEventListener('input', updateControlFromProperties);
            document.getElementById('controlWidth').addEventListener('input', updateControlFromProperties);
            document.getElementById('controlHeight').addEventListener('input', updateControlFromProperties);
            
            // 字体样式
            document.getElementById('controlFontSize').addEventListener('input', updateControlFromProperties);
            document.getElementById('controlColor').addEventListener('input', (e) => {
                document.getElementById('controlColorText').value = e.target.value;
                updateControlFromProperties();
            });
            document.getElementById('controlColorText').addEventListener('input', (e) => {
                document.getElementById('controlColor').value = e.target.value;
                updateControlFromProperties();
            });
            document.getElementById('controlBold').addEventListener('change', updateControlFromProperties);
            document.getElementById('controlItalic').addEventListener('change', updateControlFromProperties);
            document.getElementById('controlUnderline').addEventListener('change', updateControlFromProperties);
            
            // 对齐方式
            document.getElementById('alignLeft').addEventListener('click', () => {
                setAlignment('left');
            });
            document.getElementById('alignCenter').addEventListener('click', () => {
                setAlignment('center');
            });
            document.getElementById('alignRight').addEventListener('click', () => {
                setAlignment('right');
            });
            document.getElementById('alignJustify').addEventListener('click', () => {
                setAlignment('justify');
            });
            
            // 边框样式
            document.getElementById('borderWidth').addEventListener('input', updateControlFromProperties);
            document.getElementById('borderColor').addEventListener('input', (e) => {
                document.getElementById('borderColorText').value = e.target.value;
                updateControlFromProperties();
            });
            document.getElementById('borderColorText').addEventListener('input', (e) => {
                document.getElementById('borderColor').value = e.target.value;
                updateControlFromProperties();
            });
            
            // 操作按钮
            document.getElementById('deleteControl').addEventListener('click', deleteSelectedControl);
            document.getElementById('duplicateControl').addEventListener('click', duplicateSelectedControl);
        }

        // 从属性面板更新控件
        function updateControlFromProperties() {
            if (!selectedControl) return;
            
            // 内容
            const content = document.getElementById('controlContent').value;
            updateControlContent(selectedControl, content);
            
            // 位置和大小
            selectedControl.style.left = `${document.getElementById('controlX').value}mm`;
            selectedControl.style.top = `${document.getElementById('controlY').value}mm`;
            selectedControl.style.width = `${document.getElementById('controlWidth').value}mm`;
            selectedControl.style.height = `${document.getElementById('controlHeight').value}mm`;
            
            // 字体样式
            const textElements = selectedControl.querySelectorAll('p, h1, h2, h3, td, th');
            textElements.forEach(el => {
                el.style.fontSize = `${document.getElementById('controlFontSize').value}px`;
                el.style.color = document.getElementById('controlColor').value;
                el.style.fontWeight = document.getElementById('controlBold').checked ? 'bold' : 'normal';
                el.style.fontStyle = document.getElementById('controlItalic').checked ? 'italic' : 'normal';
                el.style.textDecoration = document.getElementById('controlUnderline').checked ? 'underline' : 'none';
            });
            
            // 边框样式
            selectedControl.style.borderWidth = `${document.getElementById('borderWidth').value}px`;
            selectedControl.style.borderColor = document.getElementById('borderColor').value;
            selectedControl.style.borderStyle = document.getElementById('borderWidth').value > 0 ? 'solid' : 'none';
            
            saveStateToHistory();
        }

        // 设置对齐方式
        function setAlignment(alignment) {
            if (!selectedControl) return;
            
            // 更新按钮样式
            document.querySelectorAll('#alignLeft, #alignCenter, #alignRight, #alignJustify').forEach(btn => {
                btn.classList.remove('bg-primary', 'text-white');
                btn.classList.add('bg-white', 'text-gray-600');
            });
            document.getElementById(`align${alignment.charAt(0).toUpperCase() + alignment.slice(1)}`).classList.remove('bg-white', 'text-gray-600');
            document.getElementById(`align${alignment.charAt(0).toUpperCase() + alignment.slice(1)}`).classList.add('bg-primary', 'text-white');
            
            // 应用对齐方式
            selectedControl.style.textAlign = alignment;
            
            saveStateToHistory();
        }

        // 初始化模板操作
        function initTemplateActions() {
            // 保存模板
            document.getElementById('saveTemplate').addEventListener('click', () => {
                const templateData = {
                    id: Date.now(),
                    name: prompt('请输入模板名称:', '我的模板'),
                    content: templateContent.innerHTML,
                    paperSize: paperSizeSelect.value,
                    orientation: portraitBtn.classList.contains('bg-primary') ? 'portrait' : 'landscape'
                };
                
                if (templateData.name) {
                    // 在实际应用中，这里会保存到服务器或本地存储
                    localStorage.setItem(`template_${templateData.id}`, JSON.stringify(templateData));
                    alert('模板保存成功！');
                }
            });
            
            // 预览打印
            document.getElementById('previewTemplate').addEventListener('click', () => {
                const printWindow = window.open('', '_blank');
                
                // 获取纸张大小和方向
                const orientation = portraitBtn.classList.contains('bg-primary') ? 'portrait' : 'landscape';
                let paperStyle = '';
                
                if (orientation === 'landscape') {
                    paperStyle = '@page { size: A4 landscape; margin: 1.5cm; }';
                }
                
                printWindow.document.write(`
                    <html>
                        <head>
                            <title>模板打印预览</title>
                            <style>
                                ${paperStyle}
                                body { font-family: Arial, sans-serif; }
                                .template-print { width: 100%; }
                            </style>
                        </head>
                        <body>
                            <div class="template-print">${templateContent.innerHTML}</div>
                        </body>
                    </html>
                `);
                
                printWindow.document.close();
                printWindow.onload = () => printWindow.print();
            });
            
            // 导出模板
            document.getElementById('exportTemplate').addEventListener('click', () => {
                const templateData = {
                    content: templateContent.innerHTML,
                    paperSize: paperSizeSelect.value,
                    orientation: portraitBtn.classList.contains('bg-primary') ? 'portrait' : 'landscape'
                };
                
                const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(templateData));
                const downloadAnchorNode = document.createElement('a');
                downloadAnchorNode.setAttribute("href", dataStr);
                downloadAnchorNode.setAttribute("download", `template_${Date.now()}.json`);
                document.body.appendChild(downloadAnchorNode);
                downloadAnchorNode.click();
                downloadAnchorNode.remove();
            });
            
            // 撤销和重做
            document.getElementById('undoAction').addEventListener('click', undoAction);
            document.getElementById('redoAction').addEventListener('click', redoAction);
            
            // 清空模板
            document.getElementById('clearTemplate').addEventListener('click', () => {
                if (confirm('确定要清空当前模板吗？')) {
                    templateContent.innerHTML = '';
                    deselectControl();
                    saveStateToHistory();
                }
            });
            
            // 纸张大小切换
            paperSizeSelect.addEventListener('change', updatePaperSize);
            
            // 方向切换
            portraitBtn.addEventListener('click', () => {
                portraitBtn.classList.add('bg-primary', 'text-white');
                portraitBtn.classList.remove('bg-white', 'text-gray-600');
                landscapeBtn.classList.add('bg-white', 'text-gray-600');
                landscapeBtn.classList.remove('bg-primary', 'text-white');
                updatePaperSize();
            });
            
            landscapeBtn.addEventListener('click', () => {
                landscapeBtn.classList.add('bg-primary', 'text-white');
                landscapeBtn.classList.remove('bg-white', 'text-gray-600');
                portraitBtn.classList.add('bg-white', 'text-gray-600');
                portraitBtn.classList.remove('bg-primary', 'text-white');
                updatePaperSize();
            });
            
            // 缩放级别
            zoomLevelSelect.addEventListener('change', () => {
                templateCanvas.style.transform = `scale(${parseInt(zoomLevelSelect.value) / 100})`;
            });
            
            // 添加页面
            document.getElementById('addPage').addEventListener('click', () => {
                alert('在实际应用中，这里会添加一个新的页面');
            });
        }

        // 更新纸张大小
        function updatePaperSize() {
            const size = paperSizeSelect.value;
            const isLandscape = landscapeBtn.classList.contains('bg-primary');
            
            if (size === 'a4') {
                if (isLandscape) {
                    templateCanvas.style.width = '297mm';
                    templateCanvas.style.height = '210mm';
                } else {
                    templateCanvas.style.width = '210mm';
                    templateCanvas.style.height = '297mm';
                }
            } else if (size === 'letter') {
                if (isLandscape) {
                    templateCanvas.style.width = '279mm';
                    templateCanvas.style.height = '216mm';
                } else {
                    templateCanvas.style.width = '216mm';
                    templateCanvas.style.height = '279mm';
                }
            } else if (size === 'legal') {
                if (isLandscape) {
                    templateCanvas.style.width = '356mm';
                    templateCanvas.style.height = '216mm';
                } else {
                    templateCanvas.style.width = '216mm';
                    templateCanvas.style.height = '356mm';
                }
            } else if (size === 'custom') {
                // 自定义大小可以在这里处理
                alert('自定义大小功能将在后续版本中支持');
                paperSizeSelect.value = 'a4';
            }
        }

        // 初始化画布事件
        function initCanvasEvents() {
            // 点击空白处取消选择
            templateCanvas.addEventListener('click', () => {
                deselectControl();
            });
            
            // 拖拽移动控件
            document.addEventListener('mousemove', (e) => {
                if (isDragging && selectedControl) {
                    e.preventDefault();
                    
                    const rect = templateCanvas.getBoundingClientRect();
                    const scale = rect.width / templateCanvas.offsetWidth;
                    
                    // 计算相对位置并转换为mm
                    const x = ((e.clientX - rect.left - dragOffsetX) / scale) / 3.78;
                    const y = ((e.clientY - rect.top - dragOffsetY) / scale) / 3.78;
                    
                    // 更新控件位置
                    selectedControl.style.left = `${x}mm`;
                    selectedControl.style.top = `${y}mm`;
                    
                    // 更新属性面板
                    document.getElementById('controlX').value = Math.round(x * 10) / 10;
                    document.getElementById('controlY').value = Math.round(y * 10) / 10;
                }
            });
            
            // 结束拖拽
            document.addEventListener('mouseup', () => {
                if (isDragging) {
                    isDragging = false;
                    if (selectedControl) {
                        selectedControl.classList.remove('opacity-70');
                    }
                    document.body.style.cursor = '';
                    saveStateToHistory();
                }
            });
            
            // 键盘事件
            document.addEventListener('keydown', (e) => {
                if (!selectedControl) return;
                
                // 删除键
                if (e.key === 'Delete' || e.key === 'Backspace') {
                    e.preventDefault();
                    deleteSelectedControl();
                }
                
                // 方向键移动
                const step = 1; // mm
                let x = parseFloat(selectedControl.style.left) || 0;
                let y = parseFloat(selectedControl.style.top) || 0;
                
                if (e.key === 'ArrowLeft') {
                    e.preventDefault();
                    selectedControl.style.left = `${x - step}mm`;
                    document.getElementById('controlX').value = x - step;
                } else if (e.key === 'ArrowRight') {
                    e.preventDefault();
                    selectedControl.style.left = `${x + step}mm`;
                    document.getElementById('controlX').value = x + step;
                } else if (e.key === 'ArrowUp') {
                    e.preventDefault();
                    selectedControl.style.top = `${y - step}mm`;
                    document.getElementById('controlY').value = y - step;
                } else if (e.key === 'ArrowDown') {
                    e.preventDefault();
                    selectedControl.style.top = `${y + step}mm`;
                    document.getElementById('controlY').value = y + step;
                }
                
                // Ctrl+C 复制，Ctrl+V 粘贴
                if (e.ctrlKey && e.key === 'c') {
                    e.preventDefault();
                    duplicateSelectedControl(true);
                } else if (e.ctrlKey && e.key === 'v') {
                    e.preventDefault();
                    pasteControl();
                }
                
                // Ctrl+Z 撤销，Ctrl+Y 重做
                if (e.ctrlKey && e.key === 'z') {
                    e.preventDefault();
                    undoAction();
                } else if (e.ctrlKey && e.key === 'y') {
                    e.preventDefault();
                    redoAction();
                }
            });
            
            // 键盘抬起时保存状态
            document.addEventListener('keyup', (e) => {
                if (!selectedControl) return;
                
                // 方向键移动后保存
                if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(e.key)) {
                    saveStateToHistory();
                }
            });
        }

        // 取消选择控件
        function deselectControl() {
            if (selectedControl) {
                selectedControl.classList.remove('selected-control');
                selectedControl = null;
            }
            
            controlProperties.classList.add('hidden');
            noSelection.classList.remove('hidden');
        }

        // 删除选中的控件
        function deleteSelectedControl() {
            if (selectedControl && confirm('确定要删除这个控件吗？')) {
                selectedControl.remove();
                deselectControl();
                saveStateToHistory();
            }
        }

        // 复制选中的控件
        function duplicateSelectedControl(clipboardOnly = false) {
            if (!selectedControl) return;
            
            const clone = selectedControl.cloneNode(true);
            currentControlId++;
            clone.setAttribute('data-id', currentControlId);
            
            // 稍微偏移一点位置
            const x = parseFloat(selectedControl.style.left) || 0;
            const y = parseFloat(selectedControl.style.top) || 0;
            clone.style.left = `${x + 5}mm`;
            clone.style.top = `${y + 5}mm`;
            
            // 保存到剪贴板或直接添加
            if (clipboardOnly) {
                // 保存到内存剪贴板
                window.templateClipboard = clone;
            } else {
                templateContent.appendChild(clone);
                bindControlEvents(clone);
                selectControl(clone);
                saveStateToHistory();
            }
        }

        // 粘贴控件
        function pasteControl() {
            if (!window.templateClipboard) return;
            
            const clone = window.templateClipboard.cloneNode(true);
            currentControlId++;
            clone.setAttribute('data-id', currentControlId);
            
            // 稍微偏移一点位置
            const x = parseFloat(clone.style.left) || 0;
            const y = parseFloat(clone.style.top) || 0;
            clone.style.left = `${x + 5}mm`;
            clone.style.top = `${y + 5}mm`;
            
            templateContent.appendChild(clone);
            bindControlEvents(clone);
            selectControl(clone);
            saveStateToHistory();
        }

        // 撤销操作
        function undoAction() {
            if (historyIndex > 0) {
                historyIndex--;
                restoreStateFromHistory();
            }
        }

        // 重做操作
        function redoAction() {
            if (historyIndex < history.length - 1) {
                historyIndex++;
                restoreStateFromHistory();
            }
        }

        // 保存状态到历史记录
        function saveStateToHistory() {
            // 移除当前状态之后的历史
            if (historyIndex < history.length - 1) {
                history = history.slice(0, historyIndex + 1);
            }
            
            // 保存当前状态
            const state = templateContent.innerHTML;
            history.push(state);
            historyIndex = history.length - 1;
            
            // 限制历史记录数量
            if (history.length > 20) {
                history.shift();
                historyIndex--;
            }
        }

        // 从历史记录恢复状态
        function restoreStateFromHistory() {
            if (historyIndex >= 0 && historyIndex < history.length) {
                templateContent.innerHTML = history[historyIndex];
                
                // 重新绑定所有控件事件
                templateContent.querySelectorAll('.template-control').forEach(control => {
                    bindControlEvents(control);
                });
                
                deselectControl();
            }
        }

        // 辅助函数: 获取控件内容
        function getControlContent(control) {
            const type = control.getAttribute('data-type');
            
            // 对于文本和标题控件，返回其文本内容
            if (['text', 'heading'].includes(type)) {
                const textElement = control.querySelector('p, h1, h2, h3');
                return textElement ? textElement.textContent : '';
            }
            
            // 其他控件返回其类型名称作为默认内容
            return typeToName(type);
        }

        // 辅助函数: 更新控件内容
        function updateControlContent(control, content) {
            const type = control.getAttribute('data-type');
            
            if (['text', 'heading'].includes(type)) {
                const textElement = control.querySelector('p, h1, h2, h3');
                if (textElement) {
                    textElement.textContent = content;
                }
            }
        }

        // 辅助函数: 控件类型转名称
        function typeToName(type) {
            const typeMap = {
                'text': '文本',
                'heading': '标题',
                'image': '图片',
                'line': '线条',
                'rectangle': '矩形',
                'customerInfo': '客户信息',
                'orderInfo': '订单信息',
                'productTable': '商品表格',
                'summary': '合计信息',
                'signature': '签名区域'
            };
            return typeMap[type] || type;
        }

        // 辅助函数: 获取默认宽度
        function getDefaultWidth(type) {
            const widthMap = {
                'text': 100,
                'heading': 160,
                'image': 60,
                'line': 100,
                'rectangle': 80,
                'customerInfo': 160,
                'orderInfo': 160,
                'productTable': 160,
                'summary': 160,
                'signature': 160
            };
            return widthMap[type] || 100;
        }

        // 辅助函数: 获取默认高度
        function getDefaultHeight(type) {
            const heightMap = {
                'text': 20,
                'heading': 30,
                'image': 40,
                'line': 0,
                'rectangle': 50,
                'customerInfo': 60,
                'orderInfo': 60,
                'productTable': 100,
                'summary': 80,
                'signature': 60
            };
            return heightMap[type] || 50;
        }

        // 辅助函数: RGB转十六进制颜色
        function rgbToHex(rgb) {
            if (!rgb || rgb === 'rgba(0, 0, 0, 0)') return '#000000';
            
            // 匹配 rgb(r, g, b) 或 rgba(r, g, b, a)
            const rgbMatch = rgb.match(/^rgb(a)?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
            if (!rgbMatch) return rgb;
            
            const r = parseInt(rgbMatch[2]);
            const g = parseInt(rgbMatch[3]);
            const b = parseInt(rgbMatch[4]);
            
            return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
        }

        // 辅助函数: 更新属性值（用于双击编辑后）
        function updatePropertyValues() {
            if (!selectedControl) return;
            document.getElementById('controlContent').value = getControlContent(selectedControl);
        }
    </script>
</body>
</html>
    